<html>
<head>
<title>Demo</title>
<style type="text/css">
div#wn	{ 
	position:relative; overflow:hidden;
	width:180px; height:180px;
	}
</style>
<script src="js/dw_event.js" type="text/javascript"></script>
<script src="js/dw_scroll.js" type="text/javascript"></script>
<script src="js/scroll_controls.js" type="text/javascript"></script>
<script type="text/javascript">
function init_dw_Scroll() {
  // arguments: id of outer div, id of content div
  // if horizontal scrolling, id of element containing scrolling content (table)
  var wndo = new dw_scrollObj('wn', 'lyr1', 'imgTbl');
  wndo.setUpScrollControls('scroll_links');
}

if ( dw_scrollObj.isSupported() ) {
    //dw_writeStyleSheet('css/scroll.css');
    dw_Event.add( window, 'load', init_dw_Scroll);
}
</script>
</head>
<body>

<h1>Glide Onclick Scrolling </h1>

<p>Scrolling to element with ID </p>

<div id="wn"> 
  	<div id="lyr1">
      <table id="imgTbl" border="0" cellpadding="15" cellspacing="0">

        <tr>
        	<td id="sunset"><img src="images/demo/sunset.gif" width="150" height="150" alt="" /></td>
        	<td id="deco"><img src="images/demo/deco.gif" width="150" height="150" alt="" /></td>
        	<td id="caveart"><img src="images/demo/cave-art.gif" width="150" height="150" alt="" /></td>
        	<td id="swans"><img src="images/demo/swans.gif" width="150" height="150" alt="" /></td>
        </tr>
        <tr>
        	<td id="astro"><img src="images/demo/astro.gif" width="150" height="150" alt="" /></td>
        	<td id="design1"><img src="images/demo/design1.gif" width="150" height="150" alt="" /></td>
        	<td id="mandala2"><img src="images/demo/mandala2.gif" width="150" height="150" alt="" /></td>
        	<td id="turtle"><img src="images/demo/turtle.gif" width="150" height="150" alt="" /></td>
        </tr>
        <tr>
        	<td id="mexsun"><img src="images/demo/mex-sun.gif" width="150" height="150" alt="" /></td>
        	<td id="cranes"><img src="images/demo/cranes.gif" width="150" height="150" alt="" /></td>
        	<td id="crystal"><img src="images/demo/crystal.gif" width="150" height="150" alt="" /></td>
        	<td id="mandala1"><img src="images/demo/mandala1.gif" width="150" height="150" alt="" /></td>
        </tr>
      </table>

  	</div>
  </div> <!-- end wn -->
  
  
  <div id="scroll_links">
    <table border="0" cellpadding="12" cellspacing="0">
    <tr>
    	<td><a class="scrollToId_sunset" href="#">1</a></td>
    	<td><a class="scrollToId_deco" href="#">2</a></td>
    	<td><a class="scrollToId_caveart" href="#">3</a></td>
    	<td><a class="scrollToId_swans" href="#">4</a></td>
    </tr>
    <tr>
    	<td><a class="scrollToId_astro" href="#">5</a></td>
    	<td><a class="scrollToId_design1" href="#">6</a></td>
    	<td><a class="scrollToId_mandala2" href="#">7</a></td>
    	<td><a class="scrollToId_turtle" href="#">8</a></td>
    </tr>
    <tr>
    	<td><a class="scrollToId_mexsun" href="#">9</a></td>
    	<td><a class="scrollToId_cranes" href="#">10</a></td>
    	<td><a class="scrollToId_crystal" href="#">11</a></td>
    	<td><a class="scrollToId_mandala1" href="#">12</a></td>

    </tr>
    </table>
  </div>


<p>&nbsp;</p>

<p>No hyphens or underscores in ID's for <code>scrollToId</code>. <strong>Documentation and instructions are available <a href="http://www.dyn-web.com/code/scroll/documentation.php">online</a></strong>.</p>
  
<p>Back to <a href="index.html">index</a></p>
  
</body>
</html>
